<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>view事件监听v-on</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <!--在前端开发中，我们需要经常监听事件，经常要进行交互-->
        <!--比如单击，拖拽，键盘事件等等-->
        <!--这就需要事件的监听，在Vue实现方式通过指令v-on实现-->
        <!--作用
        绑定事件监听器 语法糖@
        可以定义为 function | inline | object
        参数 event

        -->
       <!--v-on指令用来绑定DOM事件监听的。-->
       {{counter}}
       <br>
       <button v-on:click="counter++">+</button>
       <button v-on:click="counter--">-</button>
       <br>
       <!--没有参数时候可以省略(),且需要传参，默认传事件本身event-->
       <!--如果有参数，则不可以省略(),否则为undefined-->
       <button @click="increase">+</button>
       <!--如果需要参数event本身，$event-->
       <button @click="decrease(12,$evnet)">-</button>

    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
               counter:0
                
            },
            methods:{
                increase(event){
                    console.log(event);
                    this.counter++
                },

                decrease(abc,event){
                    console.log(abc);
                    console.log(event);
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>